<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx">
<!--<![endif]-->
<!-- Begin Head -->

<head>
    <title>注册</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="MobileOptimized" content="320">
    <!--Start Style -->
    <link rel="stylesheet" type="text/css" href="static/css/fonts.css">
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/auth.css">

</head>

<body>
<div id="app">
    <div class="ad-auth-wrapper">
        <div class="ad-auth-box">
            <div class="row align-items-center">
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                    <!-- <div class="ad-auth-img">
                        <img src="static/picture/auth-img1.png" alt="">
                    </div> -->
                </div>
                <!-- <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12"> -->
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" style="margin-left: 120px;">
                    <div STYLE="padding-right:200px " class="ad-auth-content">
                        <form>
                            <h2><span class="primary">用户注册界面</span></h2>
                            <p>山东省 高考志愿填报决策系统</p>
                            <div class="ad-auth-form">

                                <div class="ad-auth-feilds mb-30">
                                    <input type="text" placeholder="输入用户名" class="ad-input" v-model="users.name">
                                    <div class="ad-auth-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.3 483.3"><path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1    v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5    c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3    c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95    c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4    c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
                                    </div>
                                </div>


                                <div class="ad-auth-feilds mb-30">
                                    <input type="password" placeholder="输入密码" class="ad-input" v-model="users.password">
                                    <div class="ad-auth-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 482.8 482.8"><path d="M395.95,210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5c-81.3,0-147.5,66.1-147.5,147.5c0,7.5,6,13.5,13.5,13.5    s13.5-6,13.5-13.5c0-66.4,54-120.5,120.5-120.5c66.4,0,120.5,54,120.5,120.5v62.9h-275c-14.4,0-26.1,11.7-26.1,26.1v168.1    c0,43.1,35.1,78.2,78.2,78.2h204.9c43.1,0,78.2-35.1,78.2-78.2V236.5C422.05,222.1,410.35,210.4,395.95,210.4z M395.05,404.6    c0,28.2-22.9,51.2-51.2,51.2h-204.8c-28.2,0-51.2-22.9-51.2-51.2V237.4h307.2L395.05,404.6L395.05,404.6z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M241.45,399.1c27.9,0,50.5-22.7,50.5-50.5c0-27.9-22.7-50.5-50.5-50.5c-27.9,0-50.5,22.7-50.5,50.5    S213.55,399.1,241.45,399.1z M241.45,325c13,0,23.5,10.6,23.5,23.5s-10.5,23.6-23.5,23.6s-23.5-10.6-23.5-23.5    S228.45,325,241.45,325z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
                                    </div>
                                </div>
                                <div class="ad-auth-feilds mb-30">
                                    <input type="text" placeholder="输入您的高考分数" class="ad-input" v-model="users.score">
                                    <div class="ad-auth-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px">
                                            <path fill-rule="evenodd" fill="rgb(154, 190, 237)" d="M13.696,9.759 C12.876,8.942 11.901,8.337 10.837,7.971 C11.989,7.180 12.742,5.850 12.725,4.349 C12.698,1.961 10.713,0.031 8.318,0.062 C5.946,0.093 4.026,2.026 4.026,4.398 C4.026,5.879 4.774,7.189 5.914,7.971 C4.850,8.337 3.875,8.942 3.055,9.759 C1.786,11.025 1.026,12.663 0.878,14.426 C0.849,14.768 1.117,15.063 1.462,15.063 L1.466,15.063 C1.772,15.063 2.024,14.827 2.050,14.523 C2.325,11.285 5.057,8.734 8.375,8.734 C11.694,8.734 14.425,11.285 14.701,14.523 C14.727,14.827 14.979,15.063 15.285,15.063 L15.289,15.063 C15.634,15.063 15.902,14.768 15.873,14.426 C15.725,12.663 14.965,11.025 13.696,9.759 ZM8.375,7.562 C6.625,7.562 5.201,6.143 5.201,4.398 C5.201,2.653 6.625,1.234 8.375,1.234 C10.126,1.234 11.550,2.653 11.550,4.398 C11.550,6.143 10.126,7.562 8.375,7.562 Z"></path>
                                        </svg>
                                    </div>
                                </div>

                            </div>

                            <div>
                                <label style="margin: 30px 5px;">
                                    <span style="font-size: 1.2em; color: rgb(161, 161, 161);">选课类型：</span>&emsp;
                                    <input type="checkbox" value="物理" v-model="subjects"/><span style="font-size: 1.2em; color: rgb(161, 161, 161);">物理</span>&emsp;
                                    <input type="checkbox" value="化学" v-model="subjects"/><span style="font-size: 1.2em; color: rgb(161, 161, 161);">化学</span>&emsp;
                                    <input type="checkbox" value="生物" v-model="subjects"/><span style="font-size: 1.2em; color: rgb(161, 161, 161);">生物</span>&emsp;
                                    <input type="checkbox" value="政治" v-model="subjects"/><span style="font-size: 1.2em; color: rgb(161, 161, 161);">政治</span>&emsp;
                                    <input type="checkbox" value="历史" v-model="subjects"/><span style="font-size: 1.2em; color: rgb(161, 161, 161);">历史</span>&emsp;
                                    <input type="checkbox" value="地理" v-model="subjects"/><span style="font-size: 1.2em; color: rgb(161, 161, 161);">地理</span>&emsp;
                                </label>
                            </div>

                            <div class="ad-auth-btn">
                                <a href="javascript:void(0);" @click="saveUserInfo" class="ad-btn ad-login-member">注册</a>
                            </div>
                            <p class="ad-register-text">已经有账户了 ? <a href="login.html">登录</a></p>
                        </form>
                    </div>
                </div>
            </div>
            <div class="ad-notifications ad-error">
                <p><span>Duhh!</span>Something Went Wrong</p>
            </div>
        </div>
    </div>
</div>
</body>

</html>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            users:{},
            src:"",
            subjects:[],
            isExists:0
        },
        methods:{
            saveUserInfo(){

                console.log(this.users.name + " " + this.users.password + " " + this.subjects.toString() + " "+ this.users.score);
                if(!this.users.name){
                    alert("用户名不能为空!")
                    return;
                }
                axios.get("http://localhost:8080/users/findUsersByNameWhileReg?name="+this.users.name).then((res)=>{
                    if(res.data===0){
                        alert("该用户名已被占用!")
                    }else {
                        if(!this.users.password){
                            alert("密码不能为空!")
                            return;
                        }
                        if(this.subjects.length!==3){
                            alert("选课类型数目必须为3!")
                            return;
                        }

                        axios.post('http://localhost:8080/users/register', {
                            name: this.users.name,
                            password: this.users.password,
                            type: this.subjects.toString(),
                            score: this.users.score
                        }) .then(function (response) {
                            console.log(response);
                            alert("注册成功! 点击前往登陆页面-->");
                            location.href='login.html';
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    }
                });
            },
        },
        created(){

        }
    });
</script>